<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动画的复合属性</title>
  <style>
    .outer {
      width: 1000px;
      height: 100px;
      border: 1px solid black;
    }
    @keyframes cty {
      from {
      }
      to {
        transform: translateX(900px) rotate(360deg);
        background-color: red;
        border-radius: 50%;
      }
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /* duration 和 delay 必须一前一后 只有一个的话 就是duration  */
      animation: cty 2s 0.5s linear infinite alternate-reverse forwards;
    }
    .outer:hover .inner {
      /* 播放状态 停止继续  一般这个会单独使用 要不然会覆盖原来的属性值 */
      animation-play-state: paused;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>